<template>
    <view class="blank-wrap">
        <image :src="image" class="blank-image" />
        <text class="txt" v-if="text">{{ text }}</text>
        <navigator v-if="url" open-type="switchTab" :url="url" hover-class="none">
            <button class="btn">{{ btn_text }}</button>
        </navigator>
    </view>
</template>

<script lang="ts" setup>

withDefaults(defineProps<{
    image?: string
    text?: string
    url?: string
    btn_text?: string
}>(), {
    image: '/static/images/blank.png',
    text: '暂无数据',
    url: '',
    btn_text: '去首页看看'
})
</script>

<style scoped lang="scss">
.blank-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 200rpx;
    font-size: 24rpx;
    .blank-image {
        width: 80%;
    }
    .txt {
        color: #ccc;
        margin: 30rpx 0;
    }
    .btn {
        background-color: $main-color;
        color: #fff;
        font-size: 24rpx;
    }
}
</style>